<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body style="margin:50px;">


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">在左侧添加文字</p>

  <div class="input-group">

<span class="input-group-addon">@</span> <input type="text" class="form-control">

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">在右侧添加文字</p>
<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-addon">@163.com</span> </div>

<br/>
<div class="input-group">

<span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">设置单选和复选</p>

<div class="input-group">

<span class="input-group-addon"><input type="checkbox"></span> <input type="text" class="form-control">

</div>


<div class="input-group">

<span class="input-group-addon"><input type="radio"></span> <input type="text" class="form-control">

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">改变大小</p>

<div class="input-group input-group-lg">

<span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span>

</div>
<br/>
<div class="input-group input-group-xs">

<span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span>

</div>

<br/>
<div class="input-group input-group-sm">

<span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span>

</div>
<br/>
<div class="input-group">


<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default">提交</button>
</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">左侧使用下拉菜单或分列式</p>

<div class="input-group">

<span class="input-group-btn">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单

<span class="caret"></span> </button>

<ul class="dropdown-menu">

<li class="dropdown-header">网站导航</li> <li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>

<li class="divider"><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li>

</ul>

</span>

<input type="text" class="form-control"> </div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">导航</p>

<ul class="nav nav-tabs">

<li class="active"><a href="#">首页</a></li> 
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
 <li><a href="#">关于</a></li>

</ul>
class="active" 首选状态

<br/>
<ul class="nav">

<li ><a href="#">首页</a></li> 
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
 <li><a href="#">关于</a></li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">胶囊垂直式导航</p>
<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">首页</a></li> 
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
 <li><a href="#">关于</a></li>

</ul>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">胶囊式导航</p>

<ul class="nav nav-pills">

<li class="active"><a href="#">首页</a></li> 
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
 <li><a href="#">关于</a></li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">胶囊导航 两端对齐</p>

<ul class="nav nav-tabs nav-justified">

<li class="active"><a href="#">首页</a></li> 
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
 <li><a href="#">关于</a></li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//带下拉菜单的导航</p>

<ul class="nav nav-tabs">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

下拉菜单

<span class="caret"></span>

</a>

<ul class="dropdown-menu">

<li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li>

</ul>

</li>

</ul>












<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>